<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="图片上传">
                <el-upload class="avatar-uploader"
                    :show-file-list="false" :action="url" :headers="header" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="curComponent.propValue.url" :src="curComponent.propValue.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import CommonAttr from '../common/CommonAttr.vue'

export default {
    components: { CommonAttr },
    computed: {
        curComponent() {
            console.log(this.$store.state.curComponent)
            return this.$store.state.curComponent
        },
    },
    data() {
        return {
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.$store.state.curComponent.propValue.url = res.data.url
            console.log(this.$store.state.curComponent)
            this.$store.commit('setCurComponentNew', this.$store.state.curComponent)
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
